<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html,body{    /*必须使用此CSS，否则body上的事件无效*/
    width:100%;
    height:100%;
  }
  </style>
  <script>
    window.onload=function(){
        d1 = document.getElementById("d1");
        d2 = document.getElementById("d2");
        d3 = document.getElementById("d3");
        //true表示在捕获阶段响应，顺序为d1→d2→d3
        //false或者不写表示在冒泡阶段响应，顺序为d3→d2→d1
        d1.addEventListener("click",function(event){
            alert('d1响应');
        },"true");
        d2.addEventListener("click",function(event){
            alert('d2响应');
        },"true");
        d3.addEventListener("click",function(event){
            alert('d3响应');
        },"true");
    }
  </script>
 </head>
 <body>
 <div id="d1" style="background:#0000ff;width:800px;height:600px">
    <div id='d2' style="background:#00ff00;width:400px;height:300px">
        <div id='d3' style="background:#ff0000;width:200px;height:150px">
        </div>
    </div>
 </div>
 </body>
</html>
